package com.quyunshuo.module.home.fragment.me.compose

import android.util.Log
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.colorResource
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.quyunshuo.module.home.R
import kotlin.math.abs

@Composable
fun LevelPage(currentLevel: Int) {
    val totalLevels = 30

    LazyRow {
        items(totalLevels) { index ->
            // 每组有3个等级
            val groupStartLevel = index * 3 + 1 // 组的起始等级

            val groupEndLevel = (index + 1) * 3   // 组的结束等级

            // 计算当前组的完成状态
            val groupStatus = when {
                currentLevel >= groupEndLevel -> 3 // 全部完成
                currentLevel >= groupStartLevel -> (currentLevel - groupStartLevel + 1) // 部分完成
                else -> 0 // 未开始
            }

            Box(modifier = Modifier.width(90.dp).height(60.dp)) {
                // 灰色背景条（总进度）
                Box(
                    Modifier
                        .width(90.dp)
                        .height(10.dp)
                        .background(colorResource(R.color.main_tab1_inactive))
                        .align(Alignment.Center)
                )

                // 彩色进度条（动态宽度）
                val progressWidth = when (groupStatus) {
                    3 -> 90.dp   // 全部完成
                    2 -> 60.dp   // 完成2/3
                    1 -> 30.dp   // 完成1/3
                    else -> 0.dp // 未开始
                }

                Box(
                    Modifier
                        .width(progressWidth)
                        .height(10.dp)
                        .background(colorResource(R.color.accentColor))
                        .align(Alignment.CenterStart)
                )

                // 关卡数字
                Text(
                    text = groupEndLevel.toString(),
                    textAlign = TextAlign.Center,
                    modifier = Modifier
                        .size(20.dp)
                        .background(
                            color = if (groupStatus >= 3) {
                                colorResource(R.color.accentColor) // 有进度的颜色
                            } else {
                                colorResource(R.color.main_tab1_inactive) // 无进度的颜色
                            },
                            shape = RoundedCornerShape(30.dp)
                        )
                        .wrapContentHeight(Alignment.CenterVertically)
                        .align(Alignment.CenterEnd)
                )
            }
        }
    }
}

@Preview
@Composable
fun LevelPagePreview() {
    LevelPage(6)
}